<template>
  <div class="permission-test">
    <el-card>
      <template #header>
        <h2>权限测试页面</h2>
      </template>
      
      <div class="user-info">
        <h3>当前用户信息</h3>
        <p>用户名: {{ userInfo.username }}</p>
        <p>角色: {{ userInfo.role }}</p>
        <p>权限数量: {{ userInfo.permissions?.length || 0 }}</p>
      </div>

      <div class="permission-test-buttons">
        <h3>权限测试</h3>
        <el-button v-permission="'user_manage'" type="primary">
          用户管理权限
        </el-button>
        <el-button v-role="'ADMIN'" type="success">
          管理员角色
        </el-button>
        <el-button @click="refreshPermissions" type="warning">
          刷新权限
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { refreshUserPermissions } from '@/utils/permission'

export default {
  name: 'PermissionTest',
  setup() {
    const store = useStore()

    const userInfo = computed(() => {
      const user = store.state.user.userInfo || store.state.user
      return {
        username: user.username,
        role: user.role,
        permissions: user.permissions || []
      }
    })

    const refreshPermissions = async () => {
      try {
        await refreshUserPermissions()
        ElMessage.success('权限已刷新')
      } catch (error) {
        ElMessage.error('权限刷新失败')
      }
    }

    return {
      userInfo,
      refreshPermissions
    }
  }
}
</script>

<style scoped>
.permission-test {
  max-width: 800px;
  margin: 0 auto;
}

.user-info {
  margin-bottom: 20px;
}

.permission-test-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
</style> 